<template>
	<view>
		<top-nav :title="title" :share="share"></top-nav>
		<view class="hot-list" :style="{marginTop:navHeight}">
			<view class="search-box m-b-10" @click="goUrl('/pages/goods_search/goods_search')">
				<u-search class="content" wrap-bg-color="#fff" bg-color="#fff" search-icon-color="#ff8576"
					shape="square" :height="70" placeholder-color="#ababab">
				</u-search>
			</view>
			<view style="padding: 0 10rpx;background-color: #fff;">
				<tabs :current="searchType" :gutter="22" bgColor="#fff" @change="changeShow" bar-width="60">
					<tab v-for="(item, index) in searchTypeList" :key="index" :name="item.name">
					</tab>
				</tabs>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="main">
					<view class="hot">
						<goods-list :list="goodsList" type="hot"></goods-list>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getGoodsList
	} from '@/api/store';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					empty: {
						icon: "/static/images/goods_null.png",
						tip: "暂无商品～"
					}
				},
				goodsList: [],
				type: '',
				title: '',
				shopCateId: '',
				shopThemeId: '',
				share: 0,
				searchType: 0,
				isContainer: 0,
				searchTypeList: [{
					name: '默认',
					type: 0
				}, {
					name: '价格',
					type: 1
				}, {
					name: '最新',
					type: 2
				}]
			};
		},
		computed: {
			...mapGetters(['sysInfo']),
			statusBarHeight() {
				return this.sysInfo.statusBarHeight + 'px'
			},
			navHeight() {
				return this.sysInfo.navHeight + 'px'
			},
		},
		async onShareAppMessage() {
			const {
				type,
				title,
				shopCateId,
				shopThemeId
			} = this;
			return {
				title: title,
				path: '/pages/active_list/active_list' + '?type=hot&title=' + title + '&' + (shopThemeId ?
					'shopThemeId=' + shopThemeId : 'shopCateId=' + shopCateId) + '&share=1'
			};
		},
		onLoad() {
			this.type = this.$Route.query.type;
			this.title = this.$Route.query.title;
			this.shopCateId = this.$Route.query.shopCateId;
			this.shopThemeId = this.$Route.query.shopThemeId;
			this.share = this.$Route.query.share;
			uni.$on("refreshhome", () => {
				this.upCallback({
					num: 1,
					size: 10
				});
			});
		},
		methods: {
			upCallback(page) {
				let pageNum = page.num;
				let pageSize = page.size;
				const params = {
					category_id: this.shopCateId,
					theme_id: this.shopThemeId,
					// is_container: this.isContainer,
					page_no: pageNum,
					page_size: pageSize,
				}
				switch (this.searchType) {
					case 1:
						params.sort_by_price = 'asc'
						break;
					case 2:
						params.sort_by_create = 'desc'
						break;
				}
				getGoodsList(params).then(res => {
					if (res.code == 1) {
						let curPageData = res.data.lists;
						let curPageLen = curPageData.length;
						let hasNext = !!res.data.more;
						if (page.num == 1) {
							this.goodsList = [];
						}
						this.goodsList = this.goodsList.concat(curPageData);
						this.mescroll.endSuccess(curPageLen, hasNext);
					}
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			changeShow(index) {
				this.searchType = this.searchTypeList[index].type;
				this.upCallback({
					num: 1
				})
			},
			goUrl(url) {
				this.$Router.push({
					path: url
				})
			},
		}
	};
</script>
<style lang="scss">
	.hot-list {
		.main {

			.list-title {
				margin: 27rpx 0 30rpx;
			}

			.hot {
				padding: 0 30rpx;
			}
		}

	}
</style>